<template>
  <div class="container"
       v-title
       data-title='新增客户'>
    <ul class="list-info-view">
      <li>
        <div class="unified-template">
          <div class="template-row-list">
            <label class="label-title">姓&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;名</label>
            <div class="row-content">
              <input type="text"
                     :disabled="isBatchAdd"
                     placeholder="请输入姓名"
                     class="routineInput"
                     v-model="cList[0].name"
                     @focus="handleFocus"
                     @blur="handleBlur" />
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="unified-template">
          <div class="template-row-list">
            <label class="label-title">称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;谓</label>
            <div class="row-content">
              <div class="checkbox-list"
                   v-if="!isBatchAdd">
                <label>
                  <input style="top:0px;"
                         type="radio"
                         value="0"
                         name="sex"
                         v-model="cList[0].gender">先生
                </label>
                <label>
                  <input style="top:0px;"
                         type="radio"
                         value="1"
                         name="sex"
                         v-model="cList[0].gender">女士
                </label>
              </div>
              <div v-else>先生/女士</div>
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="mint-cell mint-field"
             v-if="!isShow">
          <div class="mint-cell-wrapper">
            <div class="mint-cell-title">
              <span class="mint-cell-text mint-phone">客&nbsp;&nbsp;户&nbsp;&nbsp;电&nbsp;&nbsp;话</span>
            </div>
            <div class="mint-cell-value">
              <input type="tel"
                     placeholder="请输入电话"
                     class="mintPhone"
                     maxlength="11"
                     v-model="cList[0].mobile"
                     :disabled="isBatchAdd"
                     @keyup="checkPhone"
                     @change="checkPhone" />
            </div>
          </div>
        </div>
        <div class="mint-cell mint-field"
             v-if="isShow">
          <div class="mint-cell-wrapper">
            <div class="mint-cell-title">
              <span class="mint-cell-text mint-phone">客&nbsp;&nbsp;户&nbsp;&nbsp;电&nbsp;&nbsp;话</span>
            </div>
            <div class="mint-cell-value">
              <input type="tel"
                     maxlength="8"
                     class="digital-input-box"
                     v-model="helfTel">
              <div class="digital-input">
                <template v-for="item of userTel">
                  <div class="digital-input-item"
                       v-if="item!=='*'">{{ item }}</div>
                  <div class="digital-input-item"
                       v-else><i class="fa fa-asterisk"></i></div>
                </template>
              </div>
            </div>
          </div>
        </div>
        <div class="mint-cell mint-field"
             v-if="!isBatchAdd && customer.reportWay === '0'">
          <div class="mint-cell-wrapper"
               style="border-bottom:none;">
            <div class="mint-cell-title">
              <span class="mint-cell-text"></span>
            </div>
            <div class="mint-cell-value">
              <div class="telEye"
                   @click="changeReportWay">
                <span class="toggleTel"
                      v-if="!isShow">
                  <i class="fa fa-eye-slash"></i>隐号报备
                </span>
                <span class="toggleTel"
                      v-if="isShow">
                  <i class="fa fa-eye"></i>全号报备
                </span>
              </div>
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="unified-template">
          <div class="template-row-list">
            <label class="label-title">意&nbsp;&nbsp;向&nbsp;&nbsp;楼&nbsp;&nbsp;盘</label>
            <div class="row-content">
              <div class="routineInfo"
                   @click="toPremisesListInfo()">{{customer.name}}</div>
              <i class="fa fa-angle-right"
                 v-if="flag"></i>
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="unified-template"
             v-if="recommenderStatus && recommenderStatus != 0">
          <div class="template-row-list">
            <label class="label-title">报备推荐人</label>
            <div class="row-content">
              <div class="routineInfo"
                   @click="openRecommenderPicker()">{{recommendName ? recommendName : '请选择报备推荐人'}}</div>
              <i class="fa fa-angle-right"></i>
              <!-- <input type="text"  placeholder="请选择报备推荐人" readonly  class="routineTime" v-model="recommendName" @click="openRecommenderPicker" >
							<div class="routineInfo" @click="toRecommendList()" >{{recommendName ? recommendName : '请选择报备推荐人'}}</div> 
							 -->
            </div>
          </div>
        </div>
      </li>
      <li v-if="specialTimeType && (specialTimeType == 1 || specialTimeType == 2 || specialTimeType == 3)">
        <div class="unified-template">
          <div class="template-row-list">
            <label class="label-title">最短报备时间</label>
            <div class="time-show">
              <span>{{specialTime}}</span>
            </div>
          </div>
        </div>
      </li>
      <li v-if="reportProtectType && reportProtectType != 4">
        <div class="unified-template">
          <div class="template-row-list">
            <label class="label-title">报备保护时间</label>
            <div class="time-show"
                 style="float: left;">
              <span>{{reportProtect}}</span>
            </div>
            <div style="text-align: right;"
                 v-if="reportProtectTipImgFlag">
              <span @click="reportProtectTip(1)"><i class="fa fa-exclamation-circle warning-icon"></i></span>
            </div>
          </div>
        </div>
      </li>
      <li v-if="visitProtectSwitchShow">
        <div class="unified-template">
          <div class="template-row-list">
            <label class="label-title">到访延长时间</label>
            <div class="time-show">
              <span>{{protectTime}}</span>
            </div>
          </div>
        </div>
      </li>
      <li>
        <div class="unified-template"
             v-if="visitTimeStatus && visitTimeStatus != 0">
          <div class="template-row-list">
            <label class="label-title">期望带看时间</label>
            <div class="row-content">
              <input type="text"
                     placeholder="选择期望带看时间"
                     readonly
                     class="routineTime"
                     v-model="cList[0].visitProtectDate"
                     @click="openPicker">
            </div>
          </div>
        </div>
      </li>
      <li v-for="(r,index) in reportModelList"
          :key="index">
        <div class="unified-template">
          <div class="template-row-list">
            <label class="label-title">{{r.modelColumn}}：</label>
            <div class="time-show">
              <input type="text"
                     :placeholder="r.modelColumn"
                     class="routineInput"
                     v-model="r.content" />
            </div>
          </div>
        </div>
      </li>
      <!--<li>
				<div class="unified-template" v-if="!isSpecialShow">
					<div class="template-row-list">
						<label class="label-title" >是否特殊报备</label>
						<div class="row-content">
							<div class="checkbox-list" @click="isSpecial">
								<label>
	                              <input type="radio" value="0" name="specialRadio" v-model="cList[0].special">否
	                            </label>
	                            <label>
	                              <input type="radio" value="1" name="specialRadio" v-model="cList[0].special">是
	                            </label>
                            </div>
						</div>
					</div>
				</div>
			</li>	-->
      <li v-if="isSpecialShow">
        <div class="unified-template">
          <div class="template-row-list">
            <label class="label-title">GPS定位</label>
            <div class="row-content">
              <span>{{cList[0].coords}}</span>
              <a @click="openLocation"
                 class="gpsLocation">
                查看地图<i class="fa fa-map-marker"></i>
              </a>
            </div>
          </div>
        </div>
      </li>
      <li v-if="isSpecialShow">
        <div class="unified-template">
          <h3 class="titlePhoto">照片上传</h3>
          <ul class="photo-list">
            <li v-for="(row, index) in fileList"
                :key="index">
              <img v-bind:src="row.fileUrl"
                   @click="previewImage(index)">
              <i class="fa fa-times-circle"
                 @click="deletefile(index)"></i>
            </li>
            <li class="departureBtn">
              <a href="javascript:;">
                <i class="fa fa-plus"></i>
              </a>
              <input type="file"
                     class="fileBtn"
                     @change="onFileChange"
                     name="files"
                     id="files">
            </li>
          </ul>
        </div>
      </li>
    </ul>

    <mt-popup v-model="popupRecommender"
              position="bottom"
              class="mint-popup mint-datetime mint-popup-bottom">
      <div class="">
        <mt-picker :slots="recommenderSlots"
                   valueKey='userName'
                   :item-height="48"
                   @change="onValuesChange"
                   :show-toolbar="true">
          <!-- <mt-button @click="showSearch" style="font-family: mintui!important;" class="mintui-search left"></mt-button> -->
          <mt-button @click="completeRecommender"
                     class="mint-datetime-action mint-button--primary"
                     style="width: 100%;">确认</mt-button>
        </mt-picker>
      </div>
    </mt-popup>

    <div class="line bor-b"></div>
    <textarea class="routineTextarea"
              placeholder="请描述客户意向，包括户型，面积等"
              v-model="params.remark"
              @focus="handleFocus"
              @blur="handleBlur"></textarea>
    <button class="btn-block"
            @click="checkCustomerPremises()"
            v-if="showRecommend">推荐</button>
    <mt-datetime-picker ref="picker"
                        type="datetime"
                        v-model="selectedDatetime"
                        @confirm="confirmDatetime">
    </mt-datetime-picker>
    <!-- reportProtectTip start -->
    <div class="reportProtectTipBack"
         v-if="reportProtectTipFlag">
      <img v-if="reportProtectTipList.length > 1"
           @click="preTips"
           src="../../assets/images/pre_white.svg"
           style="position: absolute;top: 42vh;left: 3vw;">
      <img v-if="reportProtectTipList.length > 1"
           @click="nextTips"
           src="../../assets/images/next_white.svg"
           style="position: absolute;top: 42vh;right: 3vw;">
      <div v-if="reportProtectTipList.length > 1"
           class="tipsCountStyle">{{currentIndex+1}}&nbsp;/&nbsp;{{reportProtectTipList.length}}</div>
    </div>
    <div class="reportProtectTip"
         v-if="reportProtectTipFlag">
      <span class="reportProtectTipContent"
            v-if="currentTip == '1'">
        <span class="redColor"
              style="font-size: 20px;font-weight: bold;">注意！</span><br />
        该客户<span class="redColor">{{reportProtectObj.mobile}}</span>在此楼盘下<br />
        存在<span class="redColor">{{reportProtectObj.count}}次</span>报备逾期未到访的记录<br />
        可能是您或您的同事未进行有效跟进<br />
        因此本次报备保护时间将缩短至<span class="redColor">{{reportProtectObj.msg}}</span><br />
        超过期限后，将允许其他经纪人报备<br />
        请及时跟进带看<br />
        避免再次逾期未到访
      </span>
      <span class="reportProtectTipContent"
            v-if="currentTip == '2'">
        <span class="redColor"
              style="font-size: 20px;font-weight: bold;">注意！</span><br />
        该客户<span class="redColor">{{reportProtectObj.mobile}}</span>在此楼盘下<br />
        存在<span class="redColor">{{reportProtectObj.count}}次</span>报备逾期未到访的记录<br />
        可能是您或您的同事未进行有效跟进<br />
        因此本次报备<span class="redColor">{{reportProtectObj.msg}}</span><br />
        将允许其他经纪人报备或带看<br />
        请及时跟进带看
      </span>
      <span class="reportProtectTipContent"
            v-if="currentTip == '3'">
        <span class="redColor"
              style="font-size: 20px;font-weight: bold;">注意！</span><br />
        该客户<span class="redColor">{{reportProtectObj.mobile}}</span>在此楼盘下<br />
        存在<span class="redColor">{{reportProtectObj.count}}次</span>报备逾期未到访的记录<br />
        可能是您或您的同事未进行有效跟进<br />
        因此本次已<span class="redColor">{{reportProtectObj.msg}}</span><br />
        请联系管理员处理
      </span>
      <span class="reportProtectTipContent"
            v-if="currentTip == '4'">
        <span class="redColor"
              style="font-size: 20px;font-weight: bold;">注意！</span><br />
        该客户<span class="redColor">{{reportProtectObj.mobile}}</span>在此楼盘下<br />
        存在<span class="redColor">{{reportProtectObj.count}}次</span>到访逾期未交易的记录<br />
        可能是您或您的同事未进行有效跟进<br />
        因此本次报备保护时间将缩短至<span class="redColor">{{reportProtectObj.msg}}</span><br />
        超过期限后，将允许其他经纪人报备<br />
        请及时跟进业务<br />
        避免再次逾期未交易
      </span>
      <span class="reportProtectTipContent"
            v-if="currentTip == '5'">
        <span class="redColor"
              style="font-size: 20px;font-weight: bold;">注意！</span><br />
        该客户<span class="redColor">{{reportProtectObj.mobile}}</span>在此楼盘下<br />
        存在<span class="redColor">{{reportProtectObj.count}}次</span>到访逾期未交易的记录<br />
        可能是您或您的同事未进行有效跟进<br />
        因此本次报备<span class="redColor">{{reportProtectObj.msg}}</span><br />
        将允许其他经纪人报备或带看<br />
        请及时跟进带看
      </span>
      <div class="tipBtn"
           @click="reportProtectTip(2)">好的</div>
    </div>
    <!-- reportProtectTip end this.$refs.recommendModal.-->
    <recommend-list class="recommend-modal"
                    :class="{'recommend-modal-show': recommendVisible}"
                    ref="recommendSelect"
                    v-show="recommendVisible"
                    :premises-id="customer.tid"
                    @choose="chooseRecommend" />

  </div>

</template>
<script>
//var wx=require('weixin-js-sdk');
import { DatetimePicker, Picker } from "mint-ui";
import RecommendList from "./RecommendList.vue";
export default {
  components: {
    RecommendList
  },
  data() {
    return {
      customer: {
        tid: "",
        name: "",
        reportWay: ""
      },
      flag: true,
      time: "",
      params: {
        createTime: "",
        remark: ""
      },
      cList: [
        {
          name: "",
          mobile: "",
          gender: "",
          email: "",
          special: "",
          coords: "",
          visitProtectDate: ""
        }
      ],
      isShow: false,
      isSpecialShow: false,
      helfTel: "",
      showRecommend: true,
      latitude: "",
      longitude: "",
      fileList: [],
      fileNameList: [],
      selectedDatetime: new Date(),
      protectTime: "",
      specialTime: "",
      specialTimeType: "",
      reportProtect: "",
      reportProtectType: "",
      reportModelList: [],
      customerList: [],
      isBatchAdd: false,
      visitProtectSwitchShow: "",
      reportProtectTipImgFlag: false,
      reportProtectTipFlag: false,
      currentTip: 0,
      currentIndex: 0,
      reportProtectObj: null,
      reportProtectTipList: [],
      recommendName: "",
      recommenderUuid: "",
      recommendVisible: false,
      recommenderSlots: [],
      popupRecommender: false,
      visitTimeStatus: "1",
      recommenderStatus: "1",
      recommenderCheck: false,
      premises: {},
      userTel: "",
      reportType: "1",
      reportTypeName: "全号",
      premisesId: ""
    };
  },
  mounted: function () {
    this.initCustomerInfo();
    this.popupRecommender = false;

    //this.wxConfig();
    this.getModelList();
    this.getDefaultModelList();
    // layer.close(window.addCustomerIndex)
  },
  watch: {
    cList: {
      handler(newValue, oldValue) {
        var _self = this;
        _self.timesChange();
      },
      deep: true
    },
    reportType(v) {
      this.helfTel = "";
      if (this.reportType === "2") {
        this.userTel = `   ****    `;
      } else if (this.reportType === "3") {
        this.userTel = `    ****   `;
      } else if (this.reportType === "4") {
        this.userTel = `   ***     `;
      } else if (this.reportType === "5") {
        this.userTel = `  ***      `;
      } else if (this.reportType === "6") {
        this.userTel = `    ***    `;
      } else if (this.reportType === "0" || this.reportType === "1") {
        this.userTel = "";
      }
    },
    helfTel(v) {
      const a = v.substring(0, 1) || " ";
      const b = v.substring(1, 2) || " ";
      const c = v.substring(2, 3) || " ";
      const d = v.substring(3, 4) || " ";
      const e = v.substring(4, 5) || " ";
      const f = v.substring(5, 6) || " ";
      const g = v.substring(6, 7) || " ";
      const h = v.substring(7, 8) || " ";
      if (this.reportType === "0") {
        this.userTel = `${a}${b}${c}****${d}${e}${f}${g}`;
      } else if (this.reportType === "2") {
        this.userTel = `${a}${b}${c}****${d}${e}${f}${g}`;
      } else if (this.reportType === "3") {
        this.userTel = `${a}${b}${c}${d}****${e}${f}${g}`;
      } else if (this.reportType === "4") {
        this.userTel = `${a}${b}${c}***${d}${e}${f}${g}${h}`;
      } else if (this.reportType === "5") {
        this.userTel = `${a}${b}***${c}${d}${e}${f}${g}${h}`;
      } else if (this.reportType === "6") {
        this.userTel = `${a}${b}${c}${d}***${e}${f}${g}${h}`;
      }
      console.log(v, this.userTel, 55, this.reportType);
    }
  },
  methods: {
    checkPhone() {
      if (!this.premisesId) {
        layer.msg("请先选择意向楼盘", {
          time: 2000
        });
        this.cList[0].mobile = "";
        return false;
      }
      let _self = this;
      if (_self.cList[0].mobile.length < 11) {
        return false;
      }
      if (!_self.isBatchAdd) {
        //if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(_self.cList[0].mobile)) {
        if (!/^\d{11}$/.test(_self.cList[0].mobile)) {
          layer.msg("请输入正确的号码", {
            time: 2000
          });
          return false;
        }
      }
      _self.checkReportProtectConfig();
    },
    preTips() {
      if (this.currentIndex == 0) {
        return;
      }
      this.currentIndex = this.currentIndex - 1;
      this.reportProtectObj = this.reportProtectTipList[this.currentIndex];
      this.currentTip = this.reportProtectObj.code;
    },
    nextTips() {
      if (this.currentIndex == this.reportProtectTipList.length - 1) {
        return;
      }
      this.currentIndex = this.currentIndex + 1;
      this.reportProtectObj = this.reportProtectTipList[this.currentIndex];
      this.currentTip = this.reportProtectObj.code;
    },
    reportProtectTip(type) {
      if (type == 1) {
        if (
          this.reportProtectTipList.length == 1 &&
          this.reportProtectTipList[0].code == "6"
        ) {
          layer.msg("该客户在此楼盘下已存在有效报备无法再次进行报备");
          return;
        }
        this.currentIndex = 0;
        this.reportProtectObj = this.reportProtectTipList[0];
        this.currentTip = this.reportProtectObj.code;
        this.reportProtectTipFlag = true;
      } else {
        this.reportProtectTipFlag = false;
      }
    },
    checkReportProtectConfig() {
      var _self = this;
      var body = {};
      let customerList = "";
      if (this.isBatchAdd) {
        customerList = _self.customerList;
      } else {
        customerList = JSON.parse(JSON.stringify(_self.cList));
      }
      if (
        !customerList ||
        customerList.length == 0 ||
        !customerList[0].mobile ||
        !_self.customer.tid
      ) {
        return;
      }

      body.params = {
        premisesId: _self.customer.tid,
        cusPhoneList: Array.from(customerList, (s) => s.mobile)
      };
      var url = _self.utilHelper.apiUrl + "/api/checkReportProtect";
      _self.$http.post(url, body).then((response) => {
        var body = response.body;
        var resData = body.resData;
        if (body.result == 1) {
          if (resData.list && resData.list.length > 0) {
            this.reportProtectTipList = resData.list;
            this.reportProtectTipImgFlag = true;
            this.reportProtect = resData.list[0].msg;
          } else {
            this.reportProtectTipImgFlag = false;
          }
          if (resData.list && resData.list.length > 1) {
            this.reportProtect = null;
          }
        } else {
          this.reportProtectTipImgFlag = false;
          layer.msg("报备保护时间校验失败");
        }
      });
    },
    initCustomerInfo() {
      var _self = this;
      _self.popupRecommender = false;
      this.premisesId = _self.$route.params.id;
      _self.customer.tid = _self.$route.params.id;
      _self.customerList = _self.$route.params.customerList;
      _self.reportType = _self.$route.params.reportWay || "1";
      if (_self.customer.tid == "" || _self.customer.tid == null) {
        this.customer.name = "请选择";
        this.flag = true;
        this.customer.reportWay = "1";
      } else if (_self.customerList) {
        _self.isBatchAdd = true;
        _self.flag = false;
        this.customer.name = _self.$route.params.name;
        this.cList[0].name = _self.$route.params.userNameList;
        this.cList[0].mobile = _self.$route.params.mobileList;
        this.customer.reportWay = _self.$route.params.reportWay || "1";
        //根据跳转过来的楼盘报备类型，将添加的已有的客户手机号码进行处理
        if (
          this.customer.reportWay !== "0" &&
          this.customer.reportWay !== "1"
        ) {
          this.cList[0].mobile = "";
          if (_self.customerList && _self.customerList.length > 0) {
            _self.customerList.forEach((item, index) => {
              if (this.customer.reportWay === "2") {
                item.mobile = item.mobile
                  .toString()
                  .replace(/(\d{3})\d{4}(\d{4})/, "$1****$2");
              } else if (this.customer.reportWay === "3") {
                item.mobile = item.mobile
                  .toString()
                  .replace(/(\d{4})\d{4}(\d{3})/, "$1****$2");
              } else if (this.customer.reportWay === "4") {
                item.mobile = item.mobile
                  .toString()
                  .replace(/(\d{3})\d{3}(\d{5})/, "$1***$2");
              } else if (this.customer.reportWay === "5") {
                item.mobile = item.mobile
                  .toString()
                  .replace(/(\d{2})\d{3}(\d{6})/, "$1***$2");
              } else if (this.customer.reportWay === "6") {
                item.mobile = item.mobile
                  .toString()
                  .replace(/(\d{4})\d{3}(\d{4})/, "$1***$2");
              }
              this.cList[0].mobile = this.cList[0].mobile + item.mobile;
              if (index < _self.customerList.length - 1) {
                this.cList[0].mobile = this.cList[0].mobile + "、";
              }
            });
          }
        }
        this.visitProtectSwitchShow = _self.$route.params.visitProtectSwitch;
        if (
          _self.$route.params.protectTime &&
          _self.$route.params.protectTimeType &&
          _self.$route.params.protectTimeType != 4
        ) {
          _self.protectTime = _self.setProtectTime(
            _self.$route.params.protectTime,
            _self.$route.params.protectTimeType
          );
        }
        if (
          _self.$route.params.reportProtect &&
          _self.$route.params.reportProtectType &&
          _self.$route.params.reportProtectType != 4
        ) {
          _self.reportProtect = _self.setProtectTime(
            _self.$route.params.reportProtect,
            _self.$route.params.reportProtectType
          );
          _self.reportProtectType = _self.$route.params.reportProtectType;
          _self.checkReportProtectConfig();
        }
        if (_self.$route.params.specialTime) {
          _self.specialTime =
            "提前" +
            _self.setProtectTime(
              _self.$route.params.specialTime,
              _self.$route.params.specialTimeType
            );
          _self.specialTimeType = _self.$route.params.specialTimeType;
        }
      } else {
        // 从首页的楼盘页面过来或者从选择意向楼盘页面返回
        _self.customer.name = _self.$route.params.name;
        this.customer.reportWay = _self.$route.params.reportWay || "1";
        if (
          this.customer.reportWay === "1" ||
          this.customer.reportWay === "0"
        ) {
          this.isShow = false;
        } else {
          this.isShow = true;
        }
        this.cList[0].name = localStorage["zName"];
        this.cList[0].mobile = localStorage["zMobile"];
        this.cList[0].gender = localStorage["zGender"];
        this.params.remark = localStorage["zRemark"];
        this.params.createTime = localStorage["zCreateTime"];
        if (
          _self.$route.params.protectTime &&
          _self.$route.params.protectTimeType &&
          _self.$route.params.protectTimeType != 4
        ) {
          _self.protectTime = _self.setProtectTime(
            _self.$route.params.protectTime,
            _self.$route.params.protectTimeType
          );
        }
        if (
          _self.$route.params.reportProtect &&
          _self.$route.params.reportProtectType &&
          _self.$route.params.reportProtectType != 4
        ) {
          _self.reportProtect = _self.setProtectTime(
            _self.$route.params.reportProtect,
            _self.$route.params.reportProtectType
          );
          _self.reportProtectType = _self.$route.params.reportProtectType;
          _self.checkReportProtectConfig();
        }
        if (_self.$route.params.specialTime) {
          _self.specialTime =
            "提前" +
            _self.setProtectTime(
              _self.$route.params.specialTime,
              _self.$route.params.specialTimeType
            );
          _self.specialTimeType = _self.$route.params.specialTimeType;
        }

        if (localStorage["zName"]) {
          this.cList[0].name = localStorage["zName"];
        }
        if (localStorage["zMobile"]) {
          this.cList[0].mobile = localStorage["zMobile"];
        }
        if (localStorage["zGender"]) {
          this.cList[0].gender = localStorage["zGender"];
        }
        if (localStorage["zRemark"]) {
          this.params.remark = localStorage["zRemark"];
        }
        if (localStorage["zVisitProtectDate"]) {
          this.cList[0].visitProtectDate = localStorage["zVisitProtectDate"];
        }
        if (localStorage["zCreateTime"]) {
          this.params.createTime = localStorage["zCreateTime"];
        }
        if (localStorage["zSpecialTime"]) {
          this.specialTime = localStorage["zSpecialTime"];
        }
        if (localStorage["zProtectTime"]) {
          this.protectTime = localStorage["zProtectTime"];
        }
        if (localStorage["zReportProtect"]) {
          this.reportProtect = localStorage["zReportProtect"];
        }
        if (localStorage["zReportProtectType"]) {
          this.reportProtectType = localStorage["zReportProtectType"];
        }
        if (localStorage["zSpecialTimeType"]) {
          this.specialTimeType = localStorage["zSpecialTimeType"];
        }
        // if (this.customer.reportWay === "0") {
        //   if (localStorage["helfTel"]) {
        //     this.helfTel = localStorage["helfTel"];
        //     this.isShow = true;
        //   } else {
        //     this.isShow = false;
        //   }
        // } else if (this.customer.reportWay === "1") {
        //   this.isShow = false;
        // } else if (this.customer.reportWay === "2") {
        //   if (localStorage["helfTel"]) {
        //     this.helfTel = localStorage["helfTel"];
        //   }
        //   this.isShow = true;
        // }
        _self.flag = false;
      }
    },
    toRecommendList() {
      const premisesId = this.customer.tid;
      if (!premisesId) {
        this.$toast("请选择楼盘再选择推荐人");
        return;
      }
      const recommendList = this.$refs.recommendSelect.recommendList;
      if (!recommendList || !recommendList.length) {
        this.$toast("无可选推荐人");
        return;
      }
      this.recommendVisible = true;
    },
    chooseRecommend(info = {}) {
      this.recommenderSlots = [];
      this.recommenderSlots.push({ values: info });
    },
    toPremisesListInfo() {
      if (this.params.createTime == null || this.params.createTime == "") {
        this.params.createTime = "";
      }
      if (this.cList[0].name == null || this.cList[0].name == "") {
        this.cList[0].name = "";
      }
      if (this.cList[0].mobile == null || this.cList[0].mobile == "") {
        this.cList[0].mobile = "";
      }
      if (this.params.remark == null || this.params.remark == "") {
        this.params.remark = "";
      }
      if (this.cList[0].gender == null || this.cList[0].gender == "") {
        this.cList[0].gender = "";
      }
      if (!this.cList[0].visitProtectDate) {
        this.cList[0].visitProtectDate = "";
      }
      if (this.helfTel == null || this.helfTel == "") {
        this.helfTel = "";
      }
      if (!this.specialTime) {
        this.specialTime = "";
      }
      if (!this.specialTimeType) {
        this.specialTimeType = "";
      }
      if (!this.protectTime) {
        this.protectTime = "";
      }
      if (!this.reportProtect) {
        this.reportProtect = "";
      }
      if (!this.reportProtectType) {
        this.reportProtectType = "";
      }
      localStorage.zName = this.cList[0].name;
      localStorage.zMobile = this.cList[0].mobile;
      localStorage.zRemark = this.params.remark;
      localStorage.zCreateTime = this.params.createTime;
      localStorage.zGender = this.cList[0].gender;
      localStorage.zVisitProtectDate = this.cList[0].visitProtectDate;
      localStorage.zSpecialTime = this.specialTime;
      localStorage.zSpecialTimeType = this.specialTimeType;
      localStorage.zProtectTime = this.protectTime;
      localStorage.zReportProtect = this.reportProtect;
      localStorage.zReportProtectType = this.reportProtectType;
      localStorage.helfTel = this.helfTel;
      if (this.customer.tid == "" || this.customer.tid == null) {
        // 判断跳转
        this.$router.push({
          path: "/intentionPremisesList"
        });
      } else if (this.$route.params.spec == 1) {
        this.$router.push({
          path: "/intentionPremisesList"
        });
      }
    },
    toRecommend() {
      //若为游客则弹出绑定对话框
      if (!this.tourist()) {
        return;
      }
      var _self = this;
      if (_self.vaild()) {
        // 删除保存记录
        localStorage.removeItem("zName");
        localStorage.removeItem("zMobile");
        localStorage.removeItem("zRemark");
        localStorage.removeItem("zCreateTime");
        localStorage.removeItem("zGender");
        localStorage.removeItem("helfTel");
        localStorage.removeItem("zVisitProtectDate");
        localStorage.removeItem("zSpecialTime");
        localStorage.removeItem("zSpecialTimeType");
        localStorage.removeItem("zProtectTime");
        localStorage.removeItem("zReportProtect");
        localStorage.removeItem("zReportProtectType");
        var paramsList = {};
        paramsList.staffId = window.localStorage.getItem("3_userId");
        paramsList.createTime = _self.params.createTime;
        paramsList.remark = _self.params.remark;
        paramsList.premisesId = _self.customer.tid;
        //paramsList.customerList = JSON.stringify(_self.cList);
        if (this.isBatchAdd) {
          paramsList.customerList = _self.customerList;
        } else {
          paramsList.customerList = JSON.parse(JSON.stringify(_self.cList));
        }
        //判断时候特殊报备
        if (_self.isSpecialShow == true) {
          paramsList.reportType = "2";
          paramsList.latitude = _self.latitude;
          paramsList.longitude = _self.longitude;
          if (_self.fileNameList.length <= 0) {
            layer.msg("请上传图片");
            return false;
          }
          paramsList.fileList = JSON.parse(JSON.stringify(_self.fileNameList));
          var visitProtectDate = _self.cList[0].visitProtectDate;
          if (visitProtectDate == "" && _self.visitTimeStatus == 1) {
            layer.msg("请选择期望带看时间");
            return false;
          }
          paramsList.visitProtectDate = visitProtectDate + ":00";
          if (_self.visitTimeStatus == 2 && visitProtectDate == "") {
            paramsList.visitProtectDate = "";
          }
        } else {
          paramsList.reportType = "1";
          var visitProtectDate = _self.cList[0].visitProtectDate;
          if (visitProtectDate == "" && _self.visitTimeStatus == 1) {
            layer.msg("请选择期望带看时间");
            return false;
          }
          paramsList.visitProtectDate = visitProtectDate + ":00";
          if (_self.visitTimeStatus == 2 && visitProtectDate == "") {
            paramsList.visitProtectDate = "";
          }
        }
        if (_self.visitTimeStatus == 0) {
          paramsList.visitProtectDate = "";
        }
        if (
          paramsList.remark == undefined ||
          paramsList.remark == "undefined"
        ) {
          paramsList.remark = "";
        }
        var modelList = [];
        //报备模板列表
        for (var r in _self.reportModelList) {
          if (!_self.reportModelList[r].content) {
            layer.msg("请填写" + _self.reportModelList[r].modelColumn);
            _self.showRecommend = true;
            return;
          }
          modelList.push({
            modelId: _self.reportModelList[r].id,
            modelColumn: _self.reportModelList[r].modelColumn,
            content: _self.reportModelList[r].content
          });
        }
        paramsList.reportModelList = modelList;

        var body = {};
        paramsList.recommenderUuid = _self.recommenderUuid;

        body.params = paramsList;
        _self.showRecommend = false;
        var url = _self.utilHelper.apiUrl + "/api/addReport";
        _self.$http.post(url, body).then((response) => {
          var body = response.body;
          var resData = body.resData;
          var errorMsg = body.errorMsg;
          if (body.result == 1) {
            var returnMsg = JSON.parse(resData.resultMsg);
            var successCount = returnMsg.successCount;
            var failCount = returnMsg.failCount;
            var failMsg = returnMsg.failMsg;
            var successCountMsg = "成功[" + successCount + "]条";
            var failCountMsg = "失败[" + failCount + "]条";
            if (successCount == 0) {
              _self.showRecommend = true;
              layer.msg(failMsg, {
                time: 3000
              });
            } else {
              if (failCount == 0 && successCount > 0) {
                layer.msg(
                  "提交成功",
                  {
                    time: 2000
                  },
                  function () {
                    _self.$router.push({
                      path: "/declare"
                    });
                  }
                );
              } else {
                layer.msg(
                  successCountMsg + "\n" + failCountMsg + "\n" + failMsg,
                  {
                    time: 2000
                  },
                  function () {
                    _self.$router.push({
                      path: "/declare"
                    });
                  }
                );
              }
            }
            //2、标识重复点击，不再处理
          } else if (body.result != 2) {
            _self.showRecommend = true;
            let msg = "";
            if (body.errorMsg) {
              msg = body.errorMsg;
            } else if (resData.resultMsg) {
              msg = resData.resultMsg;
            }
            layer.msg("操作失败:" + msg, {
              time: 2000
            });
          }
        });
      }
    },
    checkMobile(reportWay) {
      // console.log(reportWay, this.userTel, this.cList[0].mobile);
      let mobileRight = true;
      if (reportWay === "2") {
        this.reportTypeName = "前三后四";
        mobileRight = /^(1|8)\d{2}\*{4}\d{4}/.test(this.userTel) ? true : false;
      } else if (reportWay === "3") {
        this.reportTypeName = "前四后三";
        mobileRight = /^(1|8)[\d]{3}[\*]{4}[\d]{3}$/.test(this.userTel)
          ? true
          : false;
      } else if (reportWay === "4") {
        this.reportTypeName = "前三后五";
        mobileRight = /^(1|8)[\d]{2}[\*]{3}[\d]{5}$/.test(this.userTel)
          ? true
          : false;
      } else if (reportWay === "5") {
        this.reportTypeName = "前二后六";
        mobileRight = /^(1|8)[\d]{1}[\*]{3}[\d]{6}$/.test(this.userTel)
          ? true
          : false;
      } else if (reportWay === "6") {
        this.reportTypeName = "前四后四";
        mobileRight = /^(1|8)[\d]{3}[\*]{3}[\d]{4}$/.test(this.userTel)
          ? true
          : false;
      } else if (reportWay === "0") {
        this.reportTypeName = "全号/前三后四";
        mobileRight = /^(1|8)[\d]{2}[\*]{4}[\d]{4}$/.test(this.userTel)
          ? true
          : false;
      }
      return mobileRight;
    },
    vaild() {
      var _self = this;
      if (_self.isBatchAdd) {
        var vDate = _self.cList[0].visitProtectDate;
        if (vDate == "" && _self.visitTimeStatus == 1) {
          layer.msg("请选择期望带看时间", {
            time: 2000
          });
          return false;
        }
        return true;
      }
      if (!_self.cList[0].name) {
        layer.msg("请输入姓名", {
          time: 2000
        });
        return false;
      } else {
        if (_self.cList[0].name.length > 10) {
          layer.msg("姓名最多输入10个字符", {
            time: 2000
          });
          return false;
        }
      }
      if (!_self.cList[0].gender) {
        layer.msg("请选择称谓", {
          time: 2000
        });
        return false;
      }
      //判断是否隐号
      // 隐号
      if (_self.isShow == true) {
        if (!this.checkMobile(this.reportType)) {
          layer.msg(`所选楼盘要求${this.reportTypeName}，请修改号码后提交`, {
            time: 2000
          });
          return false;
        }
        _self.cList[0].mobile = this.userTel;
      } else {
        // 全号
        if (!/^(1|8)\d{10}$/.test(_self.cList[0].mobile)) {
          layer.msg("请输入正确的号码", {
            time: 2000
          });
          return false;
        }
      }
      if (!_self.customer.tid) {
        layer.msg("请选择楼盘", {
          time: 2000
        });
        return false;
      }
      _self.findPremisesInfo();
      var visitProtectDate = _self.cList[0].visitProtectDate;
      if (visitProtectDate == "" && _self.visitTimeStatus == 1) {
        layer.msg("请选择期望带看时间", {
          time: 2000
        });
        return false;
      }
      if (
        _self.recommenderStatus == 1 &&
        _self.recommenderCheck &&
        !_self.recommenderUuid
      ) {
        layer.msg("请选择报备推荐人", {
          time: 2000
        });
        return false;
      }
      return true;
    },
    //楼盘信息
    findPremisesInfo: function () {
      var _self = this;
      var params = {
        id: _self.customer.tid
      };
      var body = {};
      body.params = params;
      var url = this.utilHelper.apiUrl + "/api/getPremisesDetail";
      _self.$http.post(url, body).then((response) => {
        var resData = response.body.resData;
        if (resData.result == "1") {
          _self.premises = resData.detailResDto;
          if (
            _self.premises.premisesRecommenderList &&
            _self.premises.premisesRecommenderList.length > 0
          ) {
            _self.recommenderCheck = true;
          } else {
            _self.recommenderCheck = false;
          }
        }
      });
    },
    handleFocus: function () {
      document.getElementById("goble_menu_div").style.display = "none";
    },
    handleBlur: function () {
      document.getElementById("goble_menu_div").style.display = "block";
    },
    checkCustomerPremises() {
      var _self = this;
      if (_self.vaild()) {
        _self.showRecommend = false;
        if (_self.visitTimeStatus !== 0 && _self.cList[0].visitProtectDate) {
          _self.timesChange("save");
        } else {
          _self.toRecommend();
        }
      }
    },
    timesChange(type) {
      var _self = this;
      var timeStr = _self.cList[0].visitProtectDate;
      if (timeStr) {
        var url = _self.utilHelper.apiUrl + "/api/isInSpecialTime";
        var premises = _self.customer.tid;
        if (!premises) {
          return;
        }
        var body = {};
        body.params = { hopeTime: timeStr, premisesId: _self.customer.tid };
        _self.$http.post(url, body).then((response) => {
          _self.showRecommend = true;
          var data = response.body.resData;
          var time = data.specialTime;
          var msg = data.msg;
          var saveDays = data.saveDays;
          if (data.result == 1) {
            if (msg == "1") {
              //特殊报备
              layer.confirm(
                "您的报备时间距离期望带看时间不足" +
                  time +
                  "分钟，需要上传图片和定位，或者修改期望带看时间",
                {
                  btn: ["修改带看时间", "上传"], //按钮
                  shade: false //不显示遮罩
                },
                function () {
                  layer.closeAll();
                },
                function () {
                  _self.getLocation();
                  _self.isSpecialShow = true;
                }
              );
            } else if (msg == "2") {
              _self.isSpecialShow = false;
              if (type && type == "save") {
                _self.toRecommend();
              }
            } else if (msg == "3") {
              layer.alert("您选择的时间必须大于系统当前时间");
            } else if (msg == "4") {
              layer.confirm(
                "本楼盘的到访延长时间为" +
                  saveDays +
                  "分钟，从报备之时起" +
                  saveDays +
                  "分钟内未到访，需要重新报备，您的期望带看时间已超过了到访延长时间",
                {
                  btn: ["修改带看时间", "没关系，届时再报备"], //按钮
                  shade: false //不显示遮罩
                },
                function () {
                  layer.closeAll();
                },
                function () {
                  if (type && type == "save") {
                    _self.toRecommend();
                  }
                  layer.closeAll();
                }
              );
            }
          } else {
            layer.msg(data.resultMsg);
          }
        });
      }
    },
    isSpecial() {
      var _self = this;
      if (_self.cList[0].special == "1") {
        _self.getLocation();
        _self.isSpecialShow = true;
      } else {
        _self.isSpecialShow = false;
      }
    },
    wxConfig() {
      //获取微信js_sdk授权
      var currUrl = location.href.split("#")[0];
      var body = {};
      body.params = {
        url: currUrl
      };
      var url = this.utilHelper.apiUrl + "/api/js_ticket.do";
      this.$http.post(url, body).then((response) => {
        var data = response.body.resData;
        wx.config({
          debug: false,
          appId: data.appid, // 必填，公众号的唯一标识
          timestamp: data.time, // 必填，生成签名的时间戳
          nonceStr: data.noncestr, // 必填，生成签名的随机串
          signature: data.signature, // 必填，签名，见附录1
          jsApiList: ["getLocation", "openLocation"]
        });
      });
    },
    getLocation() {
      var _self = this;
      wx.getLocation({
        type: "gcj02", // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'
        success: function (res) {
          _self.latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
          _self.longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
          var speed = res.speed; // 速度，以米/每秒计
          var accuracy = res.accuracy; // 位置精度
          var coords = res.longitude + "," + res.latitude;
          _self.cList[0].coords = coords;
        }
      });
    },
    openLocation() {
      var _self = this;
      wx.openLocation({
        latitude: _self.latitude,
        longitude: _self.longitude,
        name: "客户报备",
        //address: '',
        scale: 15
        //infoUrl: ''
      });
    },
    //创建图片对象
    onFileChange(e) {
      layer.load(0, { shade: false }); //弹出加载层
      var files = e.target.files || e.dataTransfer.files;
      if (!files.length) return;
      var size = files[0].size;
      if (size > 3145728) {
        layer.msg("图片大小不能超过3M");
        layer.closeAll("loading"); //关闭加载层
        return;
      }
      this.createImage(files[0]);
    },
    createImage(file) {
      var _self = this;
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        _self.ajaxfile(e.target.result);
      };
    },
    //将base64转换blob
    dataURLtoBlob(dataUrl) {
      var arr = dataUrl.split(","),
        mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new Blob([u8arr], { type: mime });
    },
    //上传图片
    ajaxfile(file) {
      var _self = this;
      var myForm = new FormData(); //创建formdata
      var blobBin = _self.dataURLtoBlob(file); //base64转换blob
      myForm.append("blobObject", blobBin); //想formData添加blob数据
      var url = _self.utilHelper.apiUrl + "/api/uploadBase64";
      _self.$http.post(url, myForm).then((response) => {
        layer.closeAll("loading"); //关闭加载层
        var data = response.body;
        if (data.result == "1") {
          var filesUrl = {
            fileUrl: file
          };
          _self.fileList.push(filesUrl);
          var fileName = {
            fileName: data.resData.imgName
          };
          _self.fileNameList.push(fileName);
        } else {
          layer.msg("图片上传失败，请重试");
        }
      });
    },
    //图片预览
    previewImage(index) {
      var _self = this;
      var imgList = new Array();
      for (var i = 0; i < _self.fileList.length; i++) {
        imgList.push(_self.fileList[i].fileUrl);
      }
      wx.previewImage({
        current: imgList[index],
        urls: imgList
      });
    },
    //删除图片
    deletefile(id) {
      this.fileList.splice(id, 1);
      this.fileNameList.splice(id, 1);
    },
    //打开时间控件id="start_date"
    openPicker() {
      this.$refs.picker.open();
    },
    openRecommenderPicker() {
      const premisesId = this.customer.tid;
      if (!premisesId) {
        this.$toast("请选择楼盘再选择推荐人");
        return;
      }
      //const recommendList = this.$refs.recommendSelect.recommendList
      console.log(this.recommenderSlots);
      if (
        !this.recommenderSlots ||
        !this.recommenderSlots.length > 0 ||
        !this.recommenderSlots[0].values.length > 0
      ) {
        this.$toast("无可选推荐人");
        return;
      }
      this.popupRecommender = true;
    },
    changeReportWay() {
      this.isShow = !this.isShow;
      // 隐号
      if (this.isShow) {
        if (this.cList[0].mobile) {
          const a = this.cList[0].mobile.substring(0, 1) || "";
          const b = this.cList[0].mobile.substring(1, 2) || "";
          const c = this.cList[0].mobile.substring(2, 3) || "";
          const d = this.cList[0].mobile.substring(7, 8) || "";
          const e = this.cList[0].mobile.substring(8, 9) || "";
          const f = this.cList[0].mobile.substring(9, 10) || "";
          const g = this.cList[0].mobile.substring(10, 11) || "";
          this.helfTel = `${a}${b}${c}${d}${e}${f}${g}`;
        } else {
          this.helfTel = "";
          this.userTel = `   ****    `;
        }
      }
    },
    onValuesChange(picker, values) {
      var _self = this;
      if (values.length > 0) {
        _self.recommenderUuid = values[0].recommenderUuid;
        _self.recommendName = values[0].userName;
      }
    },
    completeRecommender() {
      console.log(this.recommenderUuid + "----" + this.recommendName);
      if (!this.recommenderUuid) {
        this.recommenderUuid = "";
        this.recommendName = "";
      } else {
        if (this.recommenderUuid == this.recommenderUuid) {
          this.recommenderUuid = this.recommenderUuid;
          this.recommendName = this.recommendName;
        }
      }

      this.popupRecommender = false;
    },
    confirmDatetime() {
      this.cList[0].visitProtectDate = this.GMTToStr(this.selectedDatetime);
    },
    GMTToStr(time) {
      let date = new Date(time);
      let Str = date.getFullYear() + "-";
      let month =
        date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1;
      let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
      let hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
      let minute =
        date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
      Str += month + "-" + day + " " + hour + ":" + minute + ":00";

      return Str;
    },
    setProtectTime(time, type) {
      if (!type || type == "4") {
        return "";
      }
      if (type == "1") {
        return time / 1440 + "天";
      } else if (type == "2") {
        return time / 60 + "小时";
      }
      return time + "分钟";
    },
    getModelList() {
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getReportModelList";
      var body = {};
      body.params = { premisesId: _self.$route.params.id, modelType: 2 };
      _self.$http.post(url, body).then((response) => {
        var body = response.body;
        if (body.result == "1") {
          _self.reportModelList = body.resData.list;
          if (_self.reportModelList && _self.reportModelList.length > 0) {
            _self.customerMode = true;
          }
        } else {
          layer.msg("获取报备模板失败");
        }
      });
    },
    // 取预制模板字段
    getDefaultModelList() {
      var _self = this;
      var url = this.utilHelper.apiUrl + "/api/getReportModelList";
      var body = {};
      body.params = { premisesId: _self.$route.params.id, modelType: 1 };
      _self.$http.post(url, body).then((response) => {
        var body = response.body;
        if (body.result == "1") {
          var reportDefaultModelList = body.resData.list;
          if (reportDefaultModelList && reportDefaultModelList.length > 0) {
            for (var r in reportDefaultModelList) {
              if (reportDefaultModelList[r].modelColumn === "预计到访时间") {
                _self.visitTimeStatus = reportDefaultModelList[r].showFlag;
              }
              if (reportDefaultModelList[r].modelColumn === "报备推荐人") {
                _self.recommenderStatus = reportDefaultModelList[r].showFlag;
              }
            }
          }
        } else {
          layer.msg("获取报备模板失败");
        }
        console.log(
          _self.visitTimeStatus + "---------" + _self.recommenderStatus
        );
      });
    }
  }
};
</script>
<style scoped>
/*新增报备*/
.redColor {
  color: #ff5e5e;
}
.list-info-view {
  background-color: #fff;
}
.list-info-view .template-row-list {
  height: 43px;
  line-height: 44px;
}
.list-info-view > li:after {
  content: "";
  height: 1px;
  background-color: #ccc;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  display: block;
  width: 100%;
}
.list-info-view .template-row-list {
  padding-left: 100px;
}
.list-info-view .label-title {
  width: 100px;
  font-size: 14px;
}
.template-row-list .routineInput {
  line-height: 30px;
  padding-left: 10px;
  background-color: #fff;
}
.template-row-list .routineSelect,
.template-row-list .routineTime {
  padding-right: 20px;
  padding-left: 10px;
  width: 100%;
  line-height: 30px;
  background-color: #fff;
}
.row-content .fa-angle-right {
  position: absolute;
  right: 0;
  top: 10px;
  font-size: 20px;
  display: block;
}
.routineInfo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 185px;
}
.routineTextarea,
.followTextarea {
  width: 100%;
  height: 110px;
  border-bottom: 1px solid #ccc;
  padding: 10px;
  font-size: 14px;
}
.followTextarea {
  height: 200px;
}
.routineSelect .unselecteds {
  color: #999;
}
.btn-block {
  width: 90%;
  height: 40px;
  display: block;
  margin: 36px auto;
  background-color: #ff7900;
  color: #fff;
  font-size: 14px;
  line-height: 40px;
  border-radius: 4px;
}
.checkbox-list label {
  margin-right: 40px;
  padding-left: 10px;
}
.checkbox-list label input {
  position: relative;
  top: 7px;
  margin-right: 6px;
  left: 0px;
}
.checkbox-list label:last-child {
  margin-right: 0;
}

.mint-field {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mint-cell {
  background-color: #fff;
  box-sizing: border-box;
  color: inherit;
  min-height: 48px;
  display: block;
  overflow: hidden;
  position: relative;
  text-decoration: none;
}
.mint-phone {
  font-size: 14px;
  color: #333;
}
.mint-cell-wrapper {
  border-bottom: 1px solid #f5f5f5;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  box-sizing: border-box;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  font-size: 16px;
  line-height: 1;
  min-height: inherit;
  overflow: hidden;
  padding: 0 10px;
  width: 100%;
}
.mint-field .mint-cell-title {
  width: 105px;
  -webkit-box-flex: 0;
  -ms-flex: none;
  flex: none;
}
.mint-field .mint-cell-value {
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  color: inherit;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.mint-field .mint-cell-title {
  color: #000;
}
.mint-cell-value .sexBtn {
  width: 56px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #cdcdcd;
  text-align: center;
  line-height: 22px;
  font-size: 12px;
  margin: 0 4px;
}
.mint-cell-value .sexBtn.active {
  border: 1px solid #eb6100;
  color: #eb6100;
  background-color: #ffece0;
}
.telEye {
  color: #ec6f26;
  position: absolute;
  right: 10px;
  display: inline-block;
  top: 16px;
}
.toggleTel .fa {
  margin-right: 6px;
}
.mint-cell-value .mintPhone {
  line-height: 30px;
  background-color: #fff;
  outline: none;
}

.digital-input-box {
  position: absolute;
  opacity: 0.01;
  display: block;
  z-index: 50;
  left: 105px;
  width: 100%;
  top: 2px;
  height: 46px;
}
.digital-input {
  overflow: hidden;
  width: 100%;
}
.digital-input .digital-input-item {
  height: 48px;
  float: left;
  width: 9.09%;
  border-right: 1px dashed #d8d8d8;
  text-align: center;
  line-height: 48px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.digital-input .digital-input-item:first-child {
  border-left: 1px solid #d8d8d8;
}
.digital-input-item .fa {
  font-size: 12px;
  color: #999;
}

.mint-field.is-textarea .mint-cell-wrapper .mint-cell-text {
  position: absolute;
  top: 12px;
}
.report-button {
  padding: 0 10px;
}
.report-button .mint-button--danger {
  background-color: #eb6100;
  margin-top: 20px;
}

.gpsLocation {
  float: right;
  position: relative;
  padding-right: 24px;
}
.gpsLocation > .fa {
  display: block;
  top: 12px;
  color: #eb6100;
}
.titlePhoto {
  font-weight: normal;
  padding: 10px;
}
.photo-list li {
  float: left;
  width: 64px;
  height: 64px;
  position: relative;
  border: 1px solid #cdcdcd;
  margin: 0 5px 10px;
}
.photo-list li > img {
  width: 100%;
  height: 100%;
}
.photo-list > li .fa-times-circle {
  position: absolute;
  right: -8px;
  top: -8px;
  color: #ff6666;
  font-size: 18px;
}
.photo-list .departureBtn {
  border: none;
}
.departureBtn > a {
  border: 1px dashed #7f7f7f;
  height: 100%;
  display: block;
  text-align: center;
}
.departureBtn > a .fa-plus {
  font-size: 30px;
  color: #7f7f7f;
  margin-top: 16px;
}
.departureBtn .fileBtn {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  opacity: 0;
}
.digital-input:after,
.photo-list:after {
  content: "";
  display: block;
  clear: both;
  visibility: hidden;
  overflow: hidden;
  font-size: 0;
  height: 0;
}
.time-show {
  color: #ec6f26;
}

input[type="text"],
input[type="tel"] {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reportProtectTipBack {
  background: #000;
  opacity: 0.5;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
}
.tipsCountStyle {
  position: absolute;
  left: 45vw;
  top: 68vh;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  width: 10vw;
  text-align: center;
}
.reportProtectTip {
  position: absolute;
  z-index: 999;
  top: 22vh;
  left: 16.5vw;
  width: 67vw;
  height: 44vh;
  line-height: 4vh;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 3vw;
  background: #fff;
  font-size: 3.5vw;
}
.reportProtectTip .tipBtn {
  width: 60.5vw;
  height: 9vw;
  line-height: 9vw;
  background: #ff5e5e;
  color: #fff;
  text-align: center;
  border-radius: 3px;
  position: absolute;
  bottom: 3vw;
}
.warning-icon {
  font-size: 20px;
  color: #ff5e5e;
}

.recommend-modal {
  top: 0;
  height: 100%;
  width: 100%;
  background-color: #fff;
}
.recommend-modal.recommend-modal-show {
  position: absolute;
  z-index: 1;
}
</style>
<style>
.picker-items {
  width: 100% !important;
}
</style>
